import React,{useEffect, useState} from 'react'
import {useSelector,useDispatch} from 'react-redux'
import SearchInfo from '../../components/SearchInfo'

import { Space,Switch, Table,Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import axios,{ImgUrl} from '../../utils/axios';


interface DataType {
  key: string;
  name: string;
}


export default function Organ() {
  // 表格
  const columns: ColumnsType<DataType> = [
    {
      title: '编号',
      dataIndex: 'number',
      key: 'number',
      width:120,
    },
    {
      title: '机构图片',
      dataIndex: 'picture',
      key: 'picture',
      width:100,
      render: (_, { picture }:any) => <img src={ImgUrl+picture} alt="" style={{width:'80px',height:'60px'}} />,
    },
    {
      title: '机构名称',
      dataIndex: 'name',
      key: 'name',
      width:280,
    },
    {
      title: '负责人姓名',
      dataIndex: 'contactName',
      key: 'contactName',
      width:100,
    },
    {
      title: '电话',
      dataIndex: 'contactTel',
      key: 'contactTel',
      width:120,
    },
    {
      title: '状态',
      dataIndex: 'flag',
      key: 'flag',
      render: (_, { flag }:any) => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked={flag==1?true:false}   />
      ),
    },
    
    {
      title: '操作',
      key: 'action',
      render: () => (
        <Space >
         <Button type="text" >编辑</Button>
         <Button type="text" danger>删除</Button>
        </Space>
      ),
    },
  ];
  // 搜索
  const searchColoms = [
    {
      type:'text',
      onchange:(value:any)=>gotextSearch(value)
    }
  ]
  const gotextSearch=(value?:any)=>{
    console.log(value);
  }
// 数据---------
  const [dataList,setDataList] = useState<any>([])

  useEffect(()=>{
    getTableData() 
  },[])
  // 获取机构数据
  const getTableData =()=>{
    axios({
      url:'/api/getAllChcsOrgan',
      method:'post',
    }).then((res:any)=>{
      console.log(res.data.rows);
      setDataList([...res.data.rows])
    })
  }

  const goSearch=(value:any)=>{
    console.log(value,'父组件');
  }
  return (
    <div>
      <div style={{borderLeft:'4px solid #2984F8',paddingLeft:'5px',marginBottom:'10px'}}>
        <h3>机构管理</h3>
      </div>
      <SearchInfo coloms={searchColoms} click={(value:any)=>goSearch(value)} rowKey='name'></SearchInfo>
      <Table columns={columns} dataSource={dataList}  size="small" rowKey='id' scroll={{ y: 500 }} />
    </div>
  )
}
